<template>
    <div>
        <!-- 分类头部 -->
        <div class="categories-header">
            <div class="categories-title">新闻分类</div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 分类网格 -->
            <div class="category-grid">
                <div v-for="category in categories" :key="category.name" class="category-card" @click="navigateToCategory(category)">
                    <img :src="category.image" class="category-image" :alt="category.name">
                    <div class="category-overlay">
                        <div class="category-name">{{ category.name }}</div>
                    </div>
                </div>
            </div>

            <!-- 热门 -->
            <div v-for="section in sections" :key="section.title" class="category-section">
                <div class="category-section-title">
                    <div class="category-section-name">{{ section.title }}</div>
                    <div class="category-section-more" @click="navigateToCategory(section)">
                        查看更多 <svg t="1742472147709" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3505" width="14" height="14"><path d="M236.552013 926.853955a55.805997 55.805997 0 0 0 0 80.454996 59.682997 59.682997 0 0 0 82.794996 0l468.099978-455.081978a55.805997 55.805997 0 0 0 0-80.453996L319.348009 16.689999a59.682997 59.682997 0 0 0-82.794996 0 55.805997 55.805997 0 0 0 0 80.454996L663.401993 511.999975 236.624013 926.853955z" p-id="3506" fill="#007aff"></path></svg>
                    </div>
                </div>

                <div class="category-news-list">
                    <div v-for="news in section.news" :key="news.title" class="list-item" @click="navigateToNewsDetails(news)">
                        <div class="list-item-content">
                            <div class="list-item-title">{{ news.title }}</div>
                            <div class="list-item-subtitle">{{ news.categoryName }} · {{ formatTimeAgo(news.publishTime) }}</div>
                        </div>
                        <img v-if="news.frontCover" :src="news.frontCover" width="80" height="60" style="border-radius: 6px; object-fit: cover;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="foot-bar"></div>
    <Foot activeIcon="Categories"/>
</template>
  
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { NewsStore } from '@/stores/newsInfoStore';
import api from '@/api';
import Foot from '@/components/Foot.vue';


const router = useRouter();
const newsStoreObject = NewsStore();
// 数据定义
const News_queryDTO = ref({
    categoryId: null,
    status: 1,

    current: 1,
    size: 2,
})

// 获取新闻分类名称
const getNewsCategoriesName = (Id) => {
    if (Id != null) {
        return newsStoreObject.newsCategoryInfo.find(ncInfo => ncInfo.id == Id)?.name;
    } else { return null }
};

const categories = ref([
    { id: 1, name: '政治', image: 'https://images.unsplash.com/photo-1585829365295-ab7cd400c167?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
    { id: 2, name: '体育', image: 'https://images.unsplash.com/photo-1461896836934-ffe607ba8211?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
    { id: 5, name: '科技', image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
    { id: 9, name: '财经', image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
    { id: 3, name: '娱乐', image: 'https://images.unsplash.com/photo-1603190287605-e6ade32fa852?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
    { id: 6, name: '生活', image: 'https://images.unsplash.com/photo-1505576399279-565b52d4ac71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
    { id: 7, name: '教育', image: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
    { id: 8, name: '文学', image: 'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' }
]);

const sections = ref([
    {
        id: 5,
        title: '科技热门',
        news: [
            // { title: '苹果发布iOS 17.5更新，修复多项安全漏洞', categoryName: '科技 · 1小时前', frontCover: 'https://images.unsplash.com/photo-1491933382434-500287f9b54b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
            // { title: '华为发布新一代折叠屏手机，搭载自研芯片', categoryName: '科技 · 3小时前', frontCover: 'https://images.unsplash.com/photo-1551355738-1875b6664915?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' }
        ]
    },
    {
        id: 9,
        title: '财经热门',
        news: [
            // { title: '美联储宣布维持利率不变，市场反应积极', categoryName: '财经 · 2小时前', frontCover: 'https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' },
            // { title: '国内多家银行下调存款利率，释放什么信号？', categoryName: '财经 · 5小时前', frontCover: 'https://images.unsplash.com/photo-1565514020179-026b92b4a5b0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' }
        ]
    }
]);

//格式化日期
function formatTimeAgo(timeStr) {
    // 将传入的时间字符串转换为 Date 对象
    const time = new Date(timeStr);
    // 获取当前时间
    const now = new Date();
    // 计算时间差（单位：毫秒）
    const diff = now.getTime() - time.getTime();

    // 将时间差转换为分钟、小时、天
    const minutes = Math.floor(diff / 1000 / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);

    // 根据时间差返回对应的时间格式
    if (days > 7) {
        return "7天前";
    } else if (days > 0) {
        return `${days}天前`;
    } else if (hours > 0) {
        return `${hours}小时前`;
    } else if (minutes > 0) {
        return `${minutes}分钟前`;
    } else {
        return "刚刚";
    }
}

const navigateToCategory = (category) => {
    router.push({ 
        path: '/NewsList' ,
        query: { 
            categoryId: category.id,
            name: category.name || category.title
        }
    });
};

const navigateToNewsDetails = (news) => {
    router.push({
        path: '/NewsDetails',
        query: { 
            NewsId: news.id,
            newsCategoryName: getNewsCategoriesName(news.categoryId)
        }
    });
};

onMounted(async()=>{

    //1.查科技热门
    News_queryDTO.value.categoryId = 5;
    await api.getNewsInCondition(News_queryDTO.value).then(res => {
        console.log(res.data.data.list);
        sections.value[0].news = res.data.data.list
    })

    //2.查财经热门
    News_queryDTO.value.categoryId = 9;
    await api.getNewsInCondition(News_queryDTO.value).then(res => {
        console.log(res.data.data.list);
        sections.value[1].news = res.data.data.list
    })

})


</script>
  
<style scoped>
.content {
    padding: 64px 12px 0px 12px; /* 上右下左（顺时针） */
}

.categories-header {
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* 确保标题在最顶层 */
}

.categories-title {
    font-size: 18px;
    font-weight: 600;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
}

.category-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    cursor: pointer;
}

.category-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-name {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.category-content {
    padding: 16px;
}

.category-section {
    margin-bottom: 24px;
}

.category-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.category-section-name {
    font-size: 20px;
    font-weight: 600;
}

.category-section-more {
    color: #007aff;
    font-size: 14px;
    cursor: pointer;
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 4px; /* 图标和文本之间的间距 */
}

.category-news-list {
    margin-top: 16px;
}

.list-item {
    display: flex;
    margin-bottom: 16px;
    cursor: pointer;
    padding: 10px 10px;
    border-bottom: 1px solid #eaeaea;
}

.list-item-content {
    flex: 1;
    margin-right: 16px;
}

.list-item-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.list-item-subtitle {
    color: #8e8e93;
    font-size: 14px;
}

.foot-bar{
    height: 80px;
}
</style>